<template>
    <NewCard :isright="true">
        <template slot="right">
            <el-button type="text" class="handleBtn" @click="editClick">操作</el-button>
        </template>
        <div class="table-box">
            <el-table
            :data="tableList"
            style="width: 100%"
            highlight-current-row
            ref="multipleTable"
            @row-click="rowClick">
                <el-table-column label="选择" width="50">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.checked" @change="selectSample(scope.row)"></el-checkbox>
                </template>
                </el-table-column>
                <el-table-column label="序号" type="index" width="80">
                </el-table-column>
                <el-table-column label="材料名称" >
                    <template slot-scope="scope">
                      <p>
                        <svg-icon icon-class="ts_icon" @click="clickCheckBtn(scope.row)"/>
                        {{ scope.row.name ? scope.row.name : "--" }}
                      </p>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="材料要求">
                    <template slot-scope="scope">
                        <p>{{ scope.row.requirement }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="样本" width="80">
                    <template slot-scope="scope">
                        <p>{{scope.row.materialSampleList.length == 0 ? "未上传": "已上传"}}</p>
                    </template>
                </el-table-column> -->
            </el-table>

            <SubBtn>
              <template slot="btn">
                <el-button round @click="clickCopy">复制材料</el-button>
                <el-button round @click="clickStick" v-hasPermi="['work:projectMaterial:add']">粘贴材料</el-button>
              </template>
            </SubBtn>
        </div>

        <!-- 抽屉  -->
        <el-drawer
            :title="editOrAdd?'编辑':'新增'"
            size="40%"
            :visible.sync="editDrawerShow"
            @close="editDrawerClose">
            <div class="editForm">
                <el-form
                    ref="form"
                    :model="editFrom"
                    label-width="100px"
                    label-position="left">
                    <el-form-item label="材料名称">
                        <el-input v-model="editFrom.name" placeholder="请输入..."></el-input>
                    </el-form-item>
                    <el-form-item label="材料要求">
                        <el-input
                            v-model="editFrom.requirement"
                            type="textarea"
                            rows="8"
                            resize="none"
                            placeholder="请输入...">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="材料样本">

                      <!-- 上传按钮 -->
                      <el-upload
                        :auto-upload="false"
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :on-change="uploadMaterial">
                          <el-button round>点击上传</el-button>
                          <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
                      </el-upload>

                      <!-- 文件列表 -->
                      <div class="uploadFlie-list" v-if="editFrom.materialSampleList">
                        <div class="flie-item" v-for="(material,index) in editFrom.materialSampleList" :key="index">
                          <div>
                            <i class="el-icon-document"></i>
                            <p>{{ getMaterialName(material) }}</p>
                          </div>
                          <div>
                            <a :href="material.file" v-if="material.id">
                              <svg-icon icon-class="download"/>
                            </a>
                            <i class="el-icon-delete" @click="removeImg(material)" v-hasPermi="['work:materialSample:remove']"></i>
                          </div>
                        </div>
                      </div>

                    </el-form-item>
                </el-form>
            </div>
            <SubBtn>
              <template slot="btn">
                <el-button round @click="addForm">新增</el-button>
                <el-button round @click="removeForm" v-if="editFrom.typeId != cascaderValue[1]">删除</el-button>
                <el-button type="primary" round @click="saveForm" :disabled="!isCheck">保存</el-button>
              </template>
            </SubBtn>
        </el-drawer>
    </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
//防抖：debounce 用户触发事件过于频繁，只要最后一次事件的操作
import debounce from "lodash/debounce";

import { getProjectTypelistApi,bindOrUnbindProjectMaterialApi,getProjectMaterialCheckedApi} from "@/wss/newApi_3-24/work/projectType.js";
// 项目材料 ****************
import { getFileFromUrl } from "@/wss/utils/wss.js";
import {
  getProjectMaterialListApi,
  editProjectMaterialApi,
  addProjectMaterialApi,
  removeProjectMaterialApi,
  removeMaterialSampleApi,
  addlistProjectMaterialApi,
} from "@/wss/newApi_3-24/work/projectMaterial.js";
export default {
    components:{NewCard,SubBtn},
    props:{
      cascaderValue:{
        type: Array,
      },
      copyStuffData:{
        type: Array,
      }
    },
    data(){
        return{
            // ********************项目材料*******************
            editDrawerShow: false,//编辑抽屉的显示
            // 分页参数
            pageing: { pageNum: 1, pageSize: 100, total: 0 },

            // 流程步骤的材料收集表格数据
            tableList: [],

            threeId:'',//当前选择的项目类型二级id
            typeId:'',//当前选择的项目类型三级id
            
            bottomBtnShow:true,//流程步骤的材料收集底部按钮
            bottomBtnValue:'',//流程步骤的材料收集底部输入值

            editOrAdd: false,//当前是true编辑还是false新增

            // 流程步骤的材料收集表单数据
            editFrom: {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
            },
            //流程步骤的材料收集 上传的图片
            // pictureObj:'',

            // 已上传文件转成文件流形式的数据
            fileRaw: [],
            //上传的图片 流程步骤的材料收集 上传的图片
            pictureObj: [],
            // 上传图片列表
            fileList: [],

            // 当前打钩的项目材料数据
            materialsList:[],

            copyData:[],// 当前复制的流程数据

            isCheck: true,// 判断当前点击保存是否已经返回请求
        }
    },
    watch:{
        async cascaderValue(newValue,oldValue){
            this.threeId = this.cascaderValue[1] //二级id
            this.typeId = this.cascaderValue[2] //三级id
            if(!this.threeId || !this.typeId) return
            await this.getProjectMaterialList(this.threeId,this.typeId)//获取所选的项目类型下的项目材料
            this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
        }
    },
    async mounted(){
        this.threeId = this.cascaderValue[1] //二级id
        this.typeId = this.cascaderValue[2] //三级id
        if(!this.threeId || !this.typeId) return
        await this.getProjectMaterialList(this.threeId,this.typeId)//获取所选的项目类型下的项目材料
        this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
    },
    methods:{
        // 点击操作打开抽屉
        editClick(){
          //清空之前编辑的数据
          this.editFrom = {
              name: "",
              requirement: "",
              status: "0",
              typeId: "",
              materialSampleList: [],
          };
          this.pictureObj = [];
          this.fileRaw = [];
          this.fileList = [];
          
          this.editOrAdd = false // 改新增
          this.editDrawerShow = true //打开抽屉
        },

        // 点击材料的问号
        clickCheckBtn(row){
          this.rowClick(row)
          this.editDrawerShow = true //打开抽屉
        },

        // 关闭抽屉
        editDrawerClose(){

        },
        // ***************项目材料************************************************************
    
        //获取所选的项目类型下的项目材料
        async getProjectMaterialList(threeId,typeId) {
            // 获取当前二级项目类型的材料
            let threeResult = await getProjectMaterialListApi({typeId:threeId});
            // 获取当前三级项目类型的材料
            let result = await getProjectMaterialListApi({typeId});
                
            if (result.code == 200) {
                this.tableList = [...threeResult.rows,...result.rows];
            }
        },
    
        // 点击添加材料
        addMaterialBtn(){
            //显示输入框
            this.bottomBtnShow = false
            //输入框自动获取焦点
            this.$nextTick(()=>{
                this.$refs.bottBtn.focus()
            })
        },

        //输入框按回车的回调
        async addMaterials(){
        if(this.bottomBtnValue){
            await this.addProjectMaterial(); //添加项目材料
            await this.getProjectMaterialList(this.threeId,this.typeId); //更新项目材料列表
            //隐藏输入框
            this.bottomBtnShow = true;
            this.bottomBtnValue = "";
        }else{
            this.$message({type:'warning',message:'请输入材料名称'})
        }
        },

        //上传图片的回调
        uploadMaterial(file, fileList) {
            //上传判断
            const isFormat =
            file.raw.type === "image/jpeg" ||
            file.raw.type === "image/png" ||
            file.raw.type === "application/pdf" ||
            file.raw.type === "application/msword" ||
            file.raw.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
            file.raw.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            const isPostfix = 
            file.raw.name.split('.')[1] === "jpg" ||
            file.raw.name.split('.')[1] === "jpeg" || 
            file.raw.name.split('.')[1] === "png" || 
            file.raw.name.split('.')[1] === "pdf" ||
            file.raw.name.split('.')[1] === "doc" || 
            file.raw.name.split('.')[1] === "docx" || 
            file.raw.name.split('.')[1] === "xlsx";
            const isLt2M = file.raw.size / 1024 / 1024 < 20;

            if (!isFormat || !isPostfix) {
                this.$message.error("上传样本只能是 JPG/PNG/DOC/DOCX/PDF/XLSX 格式!");
                return;
            } else {
                if (!isLt2M) {
                this.$message.error("上传样本大小不能超过 20MB!");
                return;
                } else {
                // if (fileList && fileList.length > 1) {
                //   fileList.shift();
                // }
                this.fileList.push(file);
                // this.pictureObj.push(URL.createObjectURL(file.raw));
                this.editFrom.materialSampleList.push(file)
                }
            }
        },

        // 点击图片重新上传
        againUpload(file, fileList, index){
        // //上传判断
        const isFormat =
            file.raw.type === "image/jpeg" ||
            file.raw.type === "image/png" ||
            file.raw.type === "application/pdf" ||
            file.raw.type === "application/msword" ||
            file.raw.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
            file.raw.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        const isLt2M = file.raw.size / 1024 / 1024 < 20;
        if (!isFormat) {
            this.$message.error("上传样本只能是 JPG/PNG 格式!");
            return;
        } else {
            if (!isLt2M) {
            this.$message.error("上传样本大小不能超过 20MB!");
            return;
            } else {

            this.fileRaw[index] = file.raw
            this.$set(this.pictureObj,index,URL.createObjectURL(file.raw))
            // this.pictureObj[index] = URL.createObjectURL(file.raw)
            // 把文件放到修改文件表里面
            this.editFrom.materialSampleList.push(file)
            }
        }
        },

        //点击表格某一行 把某一行的数据赋值给编辑表单
        rowClick(row) {
          this.editOrAdd = true //显示编辑标题
            //清空之前编辑的数据
            this.editFrom = {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
            };
            this.pictureObj = [];
            this.fileRaw = [];
            this.fileList = [];
            //获取typeID
            this.editFrom.typeId = this.cascaderValue[this.cascaderValue.length - 1];
            // 合并对象
            let newObj = Object.assign(this.editFrom, row);
            this.editFrom = newObj;
            //获取材料样本的地址回显
            this.editFrom.materialSampleList.forEach((item) => {
                this.pictureObj.push(item.file);
            });

            this.fileRaw = [] //加之前先清除
            //把已上传的图片转成文件流的形式 fileRaw *****************
            this.editFrom.materialSampleList.forEach((item) => {
            //获取文件名称
            if(item.id){
                let arr = item.file.split("/")
                let name = arr[arr.length-1]
                let fileName =  name

                //转成文件流
                getFileFromUrl(item.file,fileName)
                .then((response)=>{
                let file = response
                this.fileRaw.push(file);
                })
            }
            });
            //把已上传的图片转成文件流的形式 fileRaw ***************** end
        },

        // 点击新增按钮
        addForm(){
            this.editOrAdd = false //显示新增标题
            //清空之前编辑的数据
            this.editFrom = {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
            };
            this.pictureObj = [];
            this.fileRaw = [];
            this.fileList = [];
        },

        //点击保存按钮
        async saveForm() {
        if(this.editOrAdd){
            // 当前是编辑*************
            if (!this.editFrom.id) {
            this.$message({
                message: "请选择项目材料",
                type: "warning",
            });
            } else {
            this.isCheck = false //现在不给点击保存
            await this.editProjectMaterial(); //编辑接口
            await this.getProjectMaterialList(this.threeId,this.typeId); //重新获取项目材料
            await this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
            this.isCheck = true //可以点击保存
            }
        }else{
            // 当前是新增*************
            if (!this.editFrom.name || !this.editFrom.requirement) {
            this.$message({
                message: "请输入完整的项目材料",
                type: "warning",
            });
            } else {
            this.isCheck = false //现在不给点击保存
            await this.addProjectMaterial(); //添加项目材料
            await this.getProjectMaterialList(this.threeId,this.typeId); //更新项目材料列表
            await this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
            this.isCheck = true //可以点击保存
            }
        }
        },

        // 接口 *************************

        //添加项目材料
        async addProjectMaterial() {
            //获取所选的项目类型最后一个类型的id
            let typeId = this.cascaderValue[this.cascaderValue.length - 1];
            let name = this.bottomBtnValue;
            let editFrom = this.editFrom
            // 创建一个form表单
            let formDate = new FormData();
            //项目材料
            formDate.set("name", editFrom.name);
            formDate.set("typeId", typeId);
            formDate.set("requirement", editFrom.requirement);
            formDate.set("status", editFrom.status);
            this.fileList.forEach((item, i) => {
              formDate.append(`file`, item.raw);
            });
            let result = await addProjectMaterialApi(formDate);
            // console.log(result);
            if (result.code == 200) {
            this.$message({
                message: "添加成功！",
                type: "success",
            });
            //清空之前编辑的数据
            this.editFrom = {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
            };
            this.pictureObj = [];
            this.fileRaw = [];
            this.fileList = [];
            } else {
            this.$message.error("添加失败!");
            }
        },

        // 编辑项目材料的接口
        async editProjectMaterial() {
            // 创建一个form表单
            let editFrom = this.editFrom;
            let formDate = new FormData();
            //项目材料
            formDate.set("name", editFrom.name);
            formDate.set("typeId", editFrom.typeId);
            formDate.set("requirement", editFrom.requirement);
            formDate.set("status", editFrom.status);
            formDate.set("createBy", editFrom.createBy);
            formDate.set("createTime", editFrom.createTime);
            formDate.set("id", editFrom.id);
            this.fileRaw.forEach((item, i) => {
                formDate.append(`file`, item);
            });
            this.fileList.forEach((item, i) => {
                formDate.append(`file`, item.raw);
            });

            //打印formDate
            // for (var key of formDate.entries()) {
            //     console.log(key[0] + ', ' + key[1]);
            // }

            //发请求
            let result = await editProjectMaterialApi(formDate);
            if (result.code == 200) {
                this.$message({
                message: "编辑成功！",
                type: "success",
                });
            } else {
                this.$message.error("编辑失败!");
            }
        },

        //删除按钮的回调
        async removeForm() {
          if (!this.editFrom.id) {
            this.$message({
                message: "请选择项目材料",
                type: "warning",
            });
            //清空之前编辑的数据
            this.editFrom = {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
            };
            this.pictureObj = [];
            this.fileRaw = [];
            this.fileList = [];
          } else {
            await this.removeProjectMaterial(); //删除按钮的接口
            await this.getProjectMaterialList(this.threeId,this.typeId); //重新获取项目材料
            this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
            this.editDrawerShow = false // 关闭抽屉
          }
        },

        //删除按钮的接口
        async removeProjectMaterial() {
            let id = this.editFrom.id;
            let result = await removeProjectMaterialApi(id);
            if (result.code == 200) {
                this.$message({
                message: "删除成功！",
                type: "success",
                });
                // 清空编辑表单
                this.editFrom = {
                name: "",
                requirement: "",
                status: "0",
                typeId: "",
                materialSampleList: [],
                }
                this.pictureObj = ''
            } else {
                this.$message.error("删除失败!");
            }
        },

        // 删除材料样本的回调
        async removeImg(material) {
            // 根据img路径去拿到当前点击删除的项目材料样本id
            // this.editFrom.materialSampleList.forEach((item) => {
            //     if (item.file == img) {
            //     id = item.id;
            //     }
            // });
            // 有id才去删除，没有的话就在前端找到删掉
            let id = material.id;
            let index = this.editFrom.materialSampleList.indexOf(material);// 获得下标
            this.editFrom.materialSampleList.splice(index,1)// 根据下标去删数据
            this.fileRaw.splice(index,1)// 根据下标去删数据
            
            let flieindex = this.fileList.indexOf(material);// 获得下标
            this.fileList.splice(flieindex,1)// 根据下标去删数据

            if(id){
            await this.removeMaterialSample(id); // 删除材料样本的接口
            await this.getProjectMaterialList(this.threeId,this.typeId); //重新获取项目材料
            this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
            }

            //更新显示的材料样本
            // this.pictureObj.splice(this.pictureObj.indexOf(img), 1);
        },

        // 删除材料样本的接口
        async removeMaterialSample(id) {
            let result = await removeMaterialSampleApi(id);
            if (result.code == 200) {
                this.$message({
                message: "删除成功！",
                type: "success",
                });
            } else {
                this.$message.error("删除失败!");
            }
        },
        
        //勾选一行材料样本
        async selectSample(row){
            // 绑定或者解绑项目材料
            // checked为true就是绑定，false是解绑
            await this.bindOrUnbindProjectMaterial(row.checked,row.id)
            this.getProjectMaterialChecked(this.typeId) // 查询项目类型绑定了哪些材料
        },

        // 绑定或者解绑项目材料
        async bindOrUnbindProjectMaterial(checked,id){
            // checked为true就是绑定，false是解绑
            let data = {
                checked: checked,
                typeId: this.typeId,
                materialId: id,
            }
            let result = await bindOrUnbindProjectMaterialApi(data)
            if(result.code!=200) return
        },

        // 查询项目类型绑定了哪些材料
        async getProjectMaterialChecked(typeId){
        let result = await getProjectMaterialCheckedApi(typeId)
        if(result.code == 200){
            let materials = [...new Set(result.materials)]
            materials.forEach(item=>{
            let mate = this.tableList.find(k=>{
                return k.id == item
            })
            if(mate){
                this.$set(mate,'checked',true) //checked不是响应式的，要通过$set去添加这个属性
            }
            })
        }
        },

        // 获取项目材料的名称
        getMaterialName(material){
        if(material.file){
            let arr = material.file.split("/")
            let name = arr[arr.length-1]
            return name
        }else{
            return material.name
        }
        },

        // ***************项目材料*********************************************************** end

        // ----------------------------复制粘贴功能----------------------
        // 点击复制按钮
        clickCopy(){
          this.$bus.$emit('copyStuffBus',this.tableList)
        },

        // 点击粘贴按钮
        clickStick: debounce(async function(){
          // 判断没有复制就不能粘贴
          if(this.copyStuffData.length<1) {
            this.$message({message: '请复制',type: 'warning'})
            return
          }

          // 把数据覆盖添加进去
          this.tableList = this.copyStuffData
          await this.addlistProjectMaterial()
        },500),

        // 添加多个项目材料的接口
        async addlistProjectMaterial(){
          let data = JSON.parse(JSON.stringify(this.copyStuffData))
          let newData = data.filter(item=>{
            return item.typeId != this.cascaderValue[1]
          })
          newData.forEach(item=>{
            item.typeId = this.typeId
          })
          let result = await addlistProjectMaterialApi(newData)
          if(result.code==200){
            this.$message({message: '编辑成功',type: 'success'})
          }
        },
    },
}
</script>

<style scoped>
ul,h3,h4,p{
    margin: 0;
    padding: 0;
    list-style: none;
}
.pd20{
  padding: 0 20px;
}
.mb60{
  margin-bottom: 60px;
}
::v-deep .el-card__body .top .left h1{
  height: 20px;
}
::v-deep .el-card__body{
  height: 100%;
}
::v-deep .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body>div::-webkit-scrollbar{
  width: 0;
}

.projectMate{
  height: 100%;
}
.projectMate .el-card{
  position: relative;
}

/* 按钮组样式 */
.btnGroup{
  position: relative;
}
.el-button-group{
  position: absolute;
  left: 55px;
  top: 10px;
  z-index: 2;
}
.el-button-group .el-button{
  background-color: #F0F2F5;
  color: #2E3F5E;
  border: 1px solid #F0F2F5;
  padding: 8px 15px;
}
.el-button-group .el-button.isActive{
  background-color: #fff;
  color: #F87A23;
  font-weight: bold;
}

/* 抽屉样式 */ 
.conditionsTxt.drawerBox h3{
  margin-top: 0;
}
::v-deep .mateEdit .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .mateEdit .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

.conditionsTxt.drawerBox h3>p:nth-child(1),
.conditionsTxt.drawerBox h3>p:nth-child(2){
  width:10%;
}

/* 需求 */
.demandDrawer.conditionsTxt h3>p:nth-child(3){
  width: 40%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  margin-right: 3%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 40%;
}

/* 步骤 */
.stepDrawer.conditionsTxt h3>p:nth-child(3){
  width: 50%;
}
.stepDrawer.conditionsTxt h3>p:nth-child(4),
.stepDrawer.conditionsTxt h3>p:nth-child(5){
  width: 15%;
}
.stepDrawer.conditionsTxt h3>p:nth-child(5){
  text-align: right;
}

.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  width: 45%;
  margin-right: 5%;
}
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(4),
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(5){
  width: 15%;
}
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(5){
  margin-left: 4%;
}
/* 抽屉样式 end*/ 

/* 级联选择器 */
.mateCascader{
  height: 40px;
  margin-bottom: 20px;
}
.mateCascader .el-cascader{
  width: 320px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: #F5F6F8;
}
::v-deep .el-cascader .el-input__suffix{
  right: -10px; 
}
::v-deep .el-cascader .el-input__inner{
  width: 100%;
  padding-right: 0;
  border:0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2E3F5E;
  text-overflow: ellipsis;
}
::v-deep .el-cascader .el-icon-arrow-down{
  color: #2E3F5E;
}
::v-deep .el-cascader .el-icon-arrow-down:before{
  content: '\E790';
}
::v-deep .el-cascader-node.in-active-path, 
::v-deep .el-cascader-node.is-selectable.in-checked-path, 
::v-deep .el-cascader-node.is-active{
  color: #F87A23;
}

.drawerEdit h4{
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.drawerEdit i.el-icon-remove{
  width: 8%;
  color: #909AAA;
  font-size: 14px;
  cursor: pointer;
}

.conditionsTxt .drawerEdit ul>li{
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 0;
}
.conditionsTxt .drawerEdit ul>li>p{
  width: 8%;
  text-align: center;
}
.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 84%;
}
.drawerEdit .drawerAdd{
  padding: 15px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 1px solid #EBEEF5;
}
.drawerEdit .drawerAdd i{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 12.5px;
  height: 12.5px;
  border: 1px solid #909AAA;
  color: #909AAA;
  margin-left: 11%;
  cursor: pointer;
}

/* 表格数据 */
.mateEdit{
  height: calc(100% - 60px);
}
.mateEdit .el-row{
  height: 100%;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}

/* 操作按钮 */
.handleBtn{
  color: #F87A23;
  font-size: 12px;
}

/* 项目条件 */
.conditionsTxt {
}
.conditionsTxt h3{
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
  margin-top: 10px;
}
.conditionsTxt h3>p:first-child{
  width: 12%;
}
.conditionsTxt h3>p:nth-child(2){
  width: 88%;
}

::v-deep .conditionsTxt .el-collapse-item__header,
::v-deep .conditionsTxt .el-collapse-item__header.focusing{
  font-size: 14px;
  font-weight: 600;
  color: #2E3F5E;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}
::v-deep .conditionsTxt .el-collapse-item__content{
  padding-bottom: 0;
}
::v-deep .conditionsTxt .el-icon-arrow-right:before{
  content: "\E790";
}
::v-deep .conditionsTxt .el-collapse-item__arrow.is-active{
  transform: rotate(180deg);
}

.conditionsTxt ul>li{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
  color: #2E3F5E;
}
.conditionsTxt ul>li i{
  display: block;
  width: 12%;
  font-style: normal;
}
.conditionsTxt ul>li p{
  width: 88%;
}
.conditionsTxt ul>li:last-child{
  border-bottom: 0;
}

/* 项目需求 */
.demandbox h3>p:nth-child(2),
.demandbox h3>p:nth-child(3){
  width: 44%;
}

.demandbox ul>li p{
  width: 44%;
}

/* 流程步骤 */
.stepbox h3>p:nth-child(2){
  width: 50%;
}
.stepbox h3>p:nth-child(3){
  width: 22%;
}
.stepbox h3>p:nth-child(4){
  margin-left: auto;
}

.stepbox ul>li p.isLight{
  width: 50%;
  color: #F87A23;
  cursor: pointer;
}
.stepbox ul>li p:nth-child(3){
  width: 28%;
}
.stepbox ul>li p:nth-child(4){
  width: 10%;
}

/* 流程步骤的材料收集******************** */
/* 表格数据 */
.dataAcquisition{
  height: 95%;
  padding: 0 20px;
}
.dataAcquisition .el-row{
  height: 100%;
}

/* 添加材料 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.bottomBtn .el-button{
  width: 100%;
  border: 0;
  border-top: 1px solid #ECEDF0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}
.bottomBtn .el-input{
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner{
  height: 46px;
  line-height: 46px;
  border: 0;
  border-top: 1px solid #ECEDF0;
  background-color: #F8F8F8;
  text-align: center;
}

/* 上传 */
.expertRev .el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 8px 10px;
  font-size: 13px;
}
::v-deep .avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload>img{
  max-width: 100%;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
/* 流程步骤的材料收集********************end */
</style>
<style scoped>
/* 流程步骤的材料收集******************** */

.table-box{
    padding: 0 30px;
}

/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

/* 表格数据 */
.dataAcquisition{
  height: 95%;
  padding: 0 20px;
}
.dataAcquisition .el-row{
  height: 100%;
}
.dataAcquisition .el-card{
    position: relative;
}
.dataAcquisition >>> .el-card__body>div{
    height: 88%;
    overflow-y: auto;
}

/* 表格样式 */
.el-table {
  margin-bottom: 60px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table__body tr.current-row > td {
  background-color: #ebecf0;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell p>svg{
  cursor: pointer;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
  padding: 6px 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

/* 添加材料 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  text-align: center;
}

/* 编辑 */
.editForm {
  padding: 0 30px;
  margin-bottom: 80px;
  margin-top: 20px;
}
.editForm >>> .el-textarea__inner {
  font-family: Microsoft Yahei;
}

/* 上传 */
.expertRev .el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 8px 10px;
  font-size: 13px;
}
::v-deep .dataAcquisition .avatar-uploader .el-upload {
  border: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.uploadImg-list .img-box {
  position: relative;
  margin-bottom: 15px;
}
.uploadImg-list img {
  display: block;
  width: 100%;
}
.uploadImg-list .img-box > i {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  opacity: 0;
  transition: all 0.3s;
  cursor: pointer;
}
.uploadImg-list .img-box:hover > i {
  opacity: 1;
}
.uploadImg-list .img-box > i:hover {
  color: #f87a23;
}

/* 文件列表 */
.uploadFlie-list{
  margin-bottom: 20px;
}
.uploadFlie-list p{
  margin: 0;
  padding: 0;
}
.uploadFlie-list .flie-item{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #EFEFEF;
  line-height: 40px;
  margin-bottom: 10px;
}
.uploadFlie-list .flie-item>div{
  display: flex;
  align-items: center;
  color: #aaa;
  width: calc(100% - 50px);
}
.uploadFlie-list .flie-item>div:first-child i{
  margin-right: 10px;
}
.uploadFlie-list .flie-item>div:first-child p{
  width: calc(100% - 24px);
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.uploadFlie-list .flie-item>div:last-child{
  width: 50px;
}
.uploadFlie-list .flie-item p{
  color: #666;
}
.uploadFlie-list .flie-item>div:last-child i,
.uploadFlie-list .flie-item>div:last-child svg{
  margin-left: 10px;
  cursor: pointer;
  font-size: 15px;
}
/* 文件列表 end */

::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .subBtn .el-button--primary:hover {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>
<style>
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #F87A23;
  border-color: #F87A23;
}
.el-cascader-node.in-active-path, 
.el-cascader-node.is-selectable.in-checked-path, 
.el-cascader-node.is-active{
  color: #F87A23;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1180px) {
  .el-button-group{
    left: 30px;
    top: 12px;
  }
  .el-button-group .el-button{
    padding: 6px 8px;
    font-size: 12px;
  }
}
@media (max-width: 1120px) {
  .el-button-group .el-button{
    padding: 6px 5px;
  }
}
</style>